<template>
  <!-- 触底加载  -->
  <div class="mainer">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="loadMore"
      offset="10"
    >
        <!-- 拍卖结果页 -->
        <!-- 下拉刷新 -->
        <van-pull-refresh
          v-model="isLoading"
          loading-text="正在刷新"
          loosing-text="下拉刷新"
          success-text="刷新成功"
          @refresh="refresh"
        >
          <sale-result-item v-for="(item, i) in data" :key="i" :data="item" />
        </van-pull-refresh>
        <!-- 数据全部加载完成后的显示的文字 -->
        <template #finished>
          <van-divider :style="{ color: '#999999', borderColor: '#efeef3' }"
            >我是有底线的</van-divider
          >
        </template>
    </van-list>
  </div>
</template>

<script>
import SaleResultItem from "@/components/SaleResultItem.vue";
export default {
  components: { SaleResultItem },
  data() {
    return {
      data: [], //存放拍卖会场次列表的数据
      pno: 1, //初始化当前页
      pageCount: 0, //保存总页数
      isLoading: false, //下拉刷新
      loading: false, //触底加载
      finished: false, //数据是否已全部加载
    };
  },
  methods: {
    // 下拉刷新加载数据
    refresh() {
      this.pno = 1;
      this.finished = false;
      this.loadData((data) => {
        this.data = data.result;
        this.isLoading = false;
      });
    },
    // 加载数据
    loadData(callback) {
      const url = `api/auction/list?pno=${this.pno}`;
      this.axios.get(url).then((res) => callback(res.data));
    },
    // 触底加载数据
    loadMore() {
      this.loading = true;
      this.pno++;
      this.loadData((res) => {
        this.data.push(...res.result);
        this.loading = false;
        // 数据加载完成
        if (this.data.length == res.count) {
          this.finished = true;
        }
      });
    },
  },
  mounted() {
    this.loading = true;
    this.loadData((data) => {
      this.pageCount = data.count;
      this.pno = data.pno;
      this.data = data.result;
      this.loading = false;
    });
  },
};
</script>

<style lang="scss" scoped>
.mainer {
  background-color: #fff;
}
</style>